<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="txt">
    <script>
        var arr = [
            { name: "你是谁,他在那里", id: 1102 },
            { name: "圈住你在那里", id: 1102 },
            { name: "hello在那里", id: 1102 },
            { name: "怪你", id: 1102 },
            { name: "world", id: 1102 },
        ]
        /* 1.enter回车获取关键字
           2.使用关键字,对数据查询,得到一个新的数组
           3.name的字符超过3位以...结尾
         */

         var txt = document.getElementById("txt");
         txt.onkeydown = function(event){
             if(event.keyCode==13){
                console.log(this.value);
                // res = this.value;
                var res = arr.filter((item)=>{
                    return item.name.includes(this.value);
                })
                var result = res.map(
                    (item) => {
                        if(item.name.length>5){
                            item.name = item.name.slice(0,5)+"...";
                            return item;
                        }
                        return item;
                    }
                )
                console.log(result);
             }
         }
    </script>
</body>

</html>